<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/ctp.core.js">
        </script> 
        <script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/listview/ctp.ui.listview.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
        <link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/listview.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>
        <script>
            //var CTP_DEBUG = true;
			//ctp.core.log.lvl=ctp.core.loglvl.info;
            var listview1;
			$(document).ready(
				function(){
                  new ctp.ui.panel({
			  	    title: 'listview实例',
			  	    collapsible: true,
			     	width: 400,
			     	height: 400,
			    	renderTo: 'container',
				    html:'checkboxGroupDiv'
			     });				 
				 listview1=new ctp.ui.listview({
			  	    id: 'listviewID',
					width:'150px',
			  	    items:[{text:'listview1',value:'listview11'},{text:'listview2',value:'listview22'},{text:'checkbox3',value:'listview33'},
						   {text:'listview4',value:'listview4'},{text:'listview5',value:'listview5'},{text:'checkbox5',value:'listview5'},
						   {text:'listview6',value:'listview6'},{text:'listview7',value:'listview7'},{text:'checkbox8',value:'listview8'}],				
					renderTo: 'listviewDiv'				   
			     });
		        
				 new ctp.ui.button({
			  	      id: 'button1',	
					  text:'全选',					 
					  action:[ { event: 'click',
							      handler: function (){
				                     listview1.setGroupChecked(true);  
			                      }
							 }],	  	   
			    	  renderTo: 'buttonDiv'				   
			     });
				 new ctp.ui.button({
			  	      id: 'button2',	
					  text:'全不选',					 
					  action:[ { event: 'click',
							      handler: function (){
				                     listview1.setGroupUnchecked(true);  
			                      }
							 }],	  	   
			    	  renderTo: 'buttonDiv'				   
			     });
				 new ctp.ui.button({
			  	      id: 'button3',
					  width:180,
					  text:'禁止所有按钮',					 
					  action:[ { event: 'click',
							      handler: function (){
				                     listview1.setGroupDisable(true);  
			                      }
							 }],	  	   
			    	  renderTo: 'buttonDiv'				   
			     });
				 new ctp.ui.button({
			  	      id: 'button4',	
					  width:180,
					  text:'启用所有按钮',					 
					  action:[ { event: 'click',
							      handler: function (){
				                     listview1.setGroupDisable(false);  
			                      }
							 }],	  	   
			    	  renderTo: 'buttonDiv'				   
			     });
				 new ctp.ui.button({
			  	      id: 'button5',	
					  width:180,
					  text:'是否所有按钮禁用',					 
					  action:[ { event: 'click',
							      handler: function (){
				                     alert(listview1.isGroupDisable());  
			                      }
							 }],	  	   
			    	  renderTo: 'buttonDiv'				   
			     });
				 new ctp.ui.button({
			  	      id: 'button6',
					  width:180,
					  text:'是否所有按钮被选择',					 
					  action:[ { event: 'click',
							      handler: function (){
				                     alert(listview1.isGroupChecked());  
			                      }
							 }],	  	   
			    	  renderTo: 'buttonDiv'				   
			     });
				 new ctp.ui.button({
			  	      id: 'button14',
					  width:180,
					  text:'是否所有按钮未被选择',					 
					  action:[ { event: 'click',
							      handler: function (){
				                     alert(listview1.isGroupUnchecked());  
			                      }
							 }],	  	   
			    	  renderTo: 'buttonDiv'				   
			     });
				 new ctp.ui.button({
			  	      id: 'button7',
					  width:180,
					  text:'设置checkbox2的值',					 
					  action:[ { event: 'click',
							      handler: function (){
				                     listview1.setItemValue("checkbox2","checkbox2重设");  
			                      }
							 }],	  	   
			    	  renderTo: 'buttonDiv'				   
			     });
				 new ctp.ui.button({
			  	      id: 'button8',
					  width:180,
					  text:'设置checkbox2的文本',					 
					  action:[ { event: 'click',
							      handler: function (){
				                     listview1.setItemLabel("checkbox2","checkbox2重设文本");  
			                      }
							 }],	  	   
			    	  renderTo: 'buttonDiv'				   
			     });
				 new ctp.ui.button({
			  	      id: 'button9',
					  width:180,
					  text:'取得checkbox2的值',					 
					  action:[ { event: 'click',
							      handler: function (){
				                     alert(listview1.getItemValue("checkbox2"));  
			                      }
							 }],	  	   
			    	  renderTo: 'buttonDiv'				   
			     });
				 new ctp.ui.button({
			  	      id: 'button10',
					  width:180,
					  text:'删除所有成员',					 
					  action:[ { event: 'click',
							      handler: function (){
				                     listview1.delGroupItems();  
			                      }
							 }],	  	   
			    	  renderTo: 'buttonDiv'				   
			     });
				 new ctp.ui.button({
			  	      id: 'button11',	
					  width:180,
					  text:'删除某个成员',					 
					  action:[ { event: 'click',
							      handler: function (){
				                     listview1.delGroupItem("checkbox3");  
			                      }
							 }],	  	   
			    	  renderTo: 'buttonDiv'				   
			     });
				 new ctp.ui.button({
			  	      id: 'button12',
					  width:180,
					  text:'增加新成员',					 
					  action:[ { event: 'click',
							      handler: function (){
				                     listview1.addGroupItem([{id:'checkbox4',label:'新成员'}]);  
			                      }
							 }],	  	   
			    	  renderTo: 'buttonDiv'				   
			     });
				 new ctp.ui.button({
			  	      id: 'button13',
					  width:90,
					  text:'成员数',					 
					  action:[ {  event: 'click',
							      handler: function (){
				                     alert(listview1.getItemCount());  
			                      }
							 }],	  	   
			    	  renderTo: 'buttonDiv'				   
			     });
               }	
			  
			);
			
		
        </script>
    </head>
    <BODY>
    	<b>CTP.checkbox实例</b><hr/><br/>
		<div id="container">
		</div>  		
		<div id="checkboxGroupDiv"> 
           <div id="listviewDiv"></div> 
           <div id="buttonDiv"></div>         		   
        </div> 

		
</BODY>
</html>